<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Elix FocusVisibleMixin</title>

    <link rel="stylesheet" href="demos.css" />
    <script type="module" src="../define/BorderButton.js"></script>
  </head>

  <body role="main">
    <p>
      The buttons below use <code>FocusVisibleMixin</code>. They should only
      show a focus ring when you move the focus onto them via the keyboard, and
      not with the mouse or touch. This is especially useful for mobile devices,
      where users do not expect to see a keyboard focus unless they're actually
      using a keyboard.
    </p>
    <div class="demo">
      <elix-border-button>
        <div>One</div>
      </elix-border-button>
      <elix-border-button>
        <div>Two</div>
      </elix-border-button>
      <elix-border-button>
        <div>Three</div>
      </elix-border-button>
    </div>
  </body>
</html>
